<!--
 * @Descripttion: 考卷操作模态框
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-05-17 10:47:18
 * @LastEditTime: 2021-05-20 14:20:33
 * @FilePath: \cscec-pms-admin\src\views\partyMasses\partyStudyInfo\testPaperSetting\components\PaperOperateForm.vue
 * @param {Boolean} visible 模态框显示
 * @param {Object} data 模态框数据
 * @return {Event} refresh 需要刷新外部列表事件
 * @example <paper-operate-form :visible.sync="paperOperateVisible" :data="paperOperateData"></paper-operate-form>
-->
<template>
  <a-modal
    :title="title"
    :visible="visible"
    destroy-on-close
    :width="900"
    @cancel="handleClose"
  >
    <!-- 表单 -->
    <a-form-model
      ref="form"
      :rules="rules"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-model-item
            label="考卷名称"
            prop="name"
          >
            <base-input
              v-model="form.name"
              placeholder="请输入"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 表单 -->
    <!-- 模态框按钮 -->
    <template slot="footer">
      <a-button @click="handleClose">
        取消
      </a-button>
      <a-button
        type="primary"
        :loading="saveLoading"
        @click="handleSave"
      >
        提交
      </a-button>
    </template>
    <!-- 模态框按钮 -->
  </a-modal>
</template>
<script>
insertSelective
import { insertSelective, updateByPrimaryKeySelective } from '@/api/partyMasses/partyStudyInfo/testPaperSetting'
export default {
  name:'a'+ Date.now(),
  // name: 'PaperOperateForm',
  components: {},
  props: {
    // 模态框显示
    visible: {
      type: Boolean,
      require: true
    },
    // 模态框数据
    data: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 标题
      title: '',
      // 表单
      form: {
        name: void 0
      },
      // 表单布局
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: '请输入考卷名称',
            trigger: 'change'
          }
        ]
      },
      // 提交loading
      saveLoading: false
    }
  },
  watch: {
    // 监听显示弹窗写入数据
    visible: {
      handler(newV, oldV) {
        if (newV) {
          switch (this.data.type) {
            case 'add':
              this.title = '新增考卷'
              break
            case 'edit':
              this.title = '编辑考卷'
              Object.keys(this.form).forEach((el) => {
                this.form[el] = this.data.record[el] || this.form[el]
              })
              break
          }
        }
      }
    }
  },
  methods: {
    /**
     * @description: 关闭模态框
     * @param {Void}
     * @return {Void}
     */
    handleClose() {
      this.form = {
        name: void 0
      }
      this.$refs.form.resetFields()
      this.$emit('update:visible', false)
    },
    /**
     * @description: 提交
     * @param {Void}
     * @return {Void}
     */
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm({
            title: '温馨提示',
            content: '确定是否提交数据？',
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
              const { name } = this.form
              this.saveLoading = true
              switch (this.data.type) {
                case 'add':
                  insertSelective({
                    name
                  })
                    .then(({ code }) => {
                      if (code === this.SUCCESS_CODE) {
                        this.$message.success('新增成功')
                        this.handleClose()
                        this.$emit('refresh', true)
                      } else {
                        this.$message.error('新增失败')
                      }
                    })
                    .catch((error) => {
                      console.log(error)
                    })
                    .finally(() => {
                      this.saveLoading = false
                    })
                  break
                case 'edit':
                  updateByPrimaryKeySelective({
                    id: this.data.record.id,
                    name
                  })
                    .then(({ code }) => {
                      if (code === this.SUCCESS_CODE) {
                        this.$message.success('编辑成功')
                        this.handleClose()
                        this.$emit('refresh', true)
                      } else {
                        this.$message.error('编辑失败')
                      }
                    })
                    .catch((error) => {
                      console.log(error)
                      this.$message.error('编辑失败')
                    })
                    .finally(() => {
                      this.saveLoading = false
                    })
                  break
              }
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
